<template>
	<div class="margin-tree">
		<treeByArtistVue :data="data" :tags="tags"></treeByArtistVue>
	</div>
</template>

<script lang="ts" setup>
import { computed, ref } from "vue";
import { fetchMP3List, IMP3Data } from "@/utils/useRequest";
import treeByArtistVue from "@/components/tree/tree-by-artist.vue";
import { useRoute } from "vue-router";

const route = useRoute();
const data = ref([] as IMP3Data[]);
const tags = computed(() => {
	const queryTags = route.query.tags;
	if (!queryTags) {
		return [];
	} else if (typeof queryTags === "string") {
		return [queryTags];
	} else {
		return queryTags.map((v) => String(v));
	}
});

fetchMP3List().then((res) => {
	data.value = res.data;
});
</script>

<style lang="less">
.margin-tree {
	@media screen and (max-width: 768px) {
		margin-left: 10px;
	}

	.el-tree,
	.el-tree-node {
		span {
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
		}
	}
}
</style>
